<template>
  <el-container class="page-wrapper">
		<el-aside width="200px">
			<h2>东软颐养中心</h2>
			<img alt="网站logo" width="120" height="120" src="/static/images/logo.png">
			<WyMenu />
		</el-aside>
		<el-container>
			<el-header height="80px">
				<section>
					<img src="/static/images/welcome.png"/>
				</section>
				<section>
					<el-space size="small">
						<el-tag
							size="large"
							closable
							v-for="(item, index) in menuStore.getMenus()"
							:effect="item.path === menuStore.getPath() ? 'dark' : 'plain'"
							@close="closeTag(index, item.path)"
							@click="go(item.path)">{{item.text}}</el-tag>
					</el-space>
				</section>
			</el-header>
			<el-main>
				<Suspense>
					<template #default>
						<router-view />
					</template>
				</Suspense>
			</el-main>
		</el-container>
	</el-container>
</template>

<script setup>
import WyMenu from '@/views/menu'
import { useMenuStore } from '@/stores'
import router from '@/router'
const menuStore = useMenuStore()
function closeTag (index, path) {
	menuStore.removeMenu(index)
	if (path === menuStore.getPath()) {
		if (menuStore.getMenus().length === 0) {
			router.replace('/')
		} else {
			if (index === 0) {
				router.replace(menuStore.getMenus()[0].path)
			} else {
				router.replace(menuStore.getMenus()[index - 1].path)
			}
		}
	}
}
function go(path) {
	router.replace(path)
}
</script>

<style scoped lang="scss">
.page-wrapper {
	height: 100vh;
	.el-aside {
		background: #3CA2E0;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		h2 {
			text-align: center;
			padding: 10px 0;
		}
	}
	.el-header {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		.el-tag {
			cursor: pointer;
		}
	}
}
</style>